<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core' %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<title><tiles:insertAttribute name="title" ignore="true"/></title>

<!-- CSS-JQuery -->  
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/resources/css/start/jquery-ui-1.10.3.custom.css'/>" />
<!-- CSS-JQGrid -->
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/resources/css/ui.jqgrid.css'/>" />

<style>
html,body { height:100%; }
body { margin:0; padding:0; }
#wrap { width:100%; height:100%;}

.table_row {
  /*padding:0px 0px 0px 0px;*/
    clear:both;
}
.col {
  /*padding:0px 0px 0px 0px;*/
  float:left;
}
.col_last {
  /*padding:0px 0px 0px 0px;*/
  clear:both;
}
</style>

<!-- JS-JQuery -->    
<script type="text/javascript" src="<c:url value='/resources/js/jquery-1.9.0.min.js'/>"></script>
<!-- JS-JQuery-UI -->
<script type="text/javascript" src="<c:url value='/resources/js/jquery-ui-1.10.3.custom.min.js'/>"></script>
<!-- JS-JQuery Layout -->
<script type="text/javascript" src="<c:url value='/resources/js/jquery.layout-latest.min.js'/>"></script>

<script type="text/javascript">
var total_width = 1275;
var splitbar_width = 0;
var toggle_open = true; 

$(document).ready(function () {
	
	/** Top메뉴 viewing */
    //$("#jTopMenu").jMenu();

    /** 메뉴데이터를 구성하여 메뉴를 출력한다 */
    menuItems = ${menuJsonStr}; // 메뉴 JSON Data
   
    // 메뉴구성
    activeFlag = false;
                
    childCount();
    setChildCount();
   
    var htmlTxt = recurseMenu(menuItems[0].PARENT_MENU_ID, 0);  
    $("#left_menu").html(htmlTxt);
    
});   

/** Left메뉴 조회,출력 */
function fn_leftMenu(menuAction, menuId) {
    $.ajax({
        type : "post",
        url : '<c:url value="/"/>'+menuAction,
        dataType : "json",
        data : {MENU_ID:menuId},
        success : function(msg) {
        	/** 메뉴데이터를 구성하여 메뉴를 출력한다 */
        	activeFlag = false;
        	
            menuItems = msg;        	
        	childCount();
        	setChildCount();
        	
        	var htmlTxt = recurseMenu(menuId, 0);
        	$("#left_menu").html(htmlTxt);

        	/** Left메뉴 Viewing */
            $(".topnav").accordion({
                accordion:false,
                speed: 500,
                closedSign: '[+]',
                openedSign: '[-]'
            });
        },
        error : function(xhr, status, error) {
        	alert(error);
        }
    });
} 

var h = new Object();
var menuItems; 
var activeFlag = false;

function childCount() {
    $.each(menuItems, function(key,value) {
       h[value.PARENT_MENU_ID] = (h[value.PARENT_MENU_ID]==undefined? 0:h[value.PARENT_MENU_ID])+1;
    });
    
}
function setChildCount() {
    $.each(menuItems, function(key,value) {
        var c = h[value.MENU_ID]==undefined?0:h[value.MENU_ID];
        value.CHILD_COUNT = c;   
    });
}

function recurseMenu(parent, level) {
    var c = (level == 0)? "class='topnav'":""; 
    htmlStrTxt = "<ul " + c + ">";

    for (var x in menuItems) {
        if (menuItems[x].PARENT_MENU_ID == parent) {
        	
        	// active class
            var active;
            if(level == 1 && activeFlag==false) {
                active = "class='active'"; 
                activeFlag = true;
            } else active = "";        	
        	// menu link
            var href = "javascript:void(0);"; 
            var onclick;
            if(level == 1) {
                link = '<c:url value="/"/>'+menuItems[x].MENU_ACTION.substring(1);
                onclick = "javascript:fn_menuClick('"+link+"')";
            } else {
            	onclick = "";
            }
            
            htmlStrTxt += '<li ' + active +'>' + '<a href="'+href+'" onclick="'+onclick+'">' + menuItems[x].MENU_NAME + "</a>";

            if (menuItems[x].CHILD_COUNT > 0) {
                htmlStrTxt += recurseMenu(menuItems[x].MENU_ID, level + 1);
            }
            htmlStrTxt += '</li>';
        }
    }
    return htmlStrTxt + '</ul>';
}

/** 메뉴이동 */
 function fn_menuClick(menuAction) {
    $("#work_frame").attr("src", menuAction);
}
</script>
</head> 

<body>
    <div id="wrap">
	    <div class="table_row" style="width:100%;height:50px;"> 
	        <div class="col_last">
				<ul id="jTopMenu">
				    <c:if test="${empty topMenuList}">
				    No Data results
				    </c:if>
				    <c:forEach var="item" items="${topMenuList}" varStatus="status">
				        <li>
				            <a href='#' onclick="javascript:fn_leftMenu('<c:out value="${item.MENU_ACTION}"/>','${item.MENU_ID}');">${item.MENU_NAME}</a>
				        </li>
				    </c:forEach>
				</ul>
			</div>	
	    </div>		
	    <div class="table_row" style="width:100%;height:880px;"> 
	        <div id="left_menu" class="col" style="overflow:hidden;width:220px;height:100%;">
				<ul class='topnav'>
			    </ul>
	        </div>
	        <div id="toggle_bar" style="z-index:10;width:8px;height:40px;top:200px;left:-4px;position:relative;cursor:pointer;background-color:#71B9D7" class="col"></div>
	        <div id="work_area"  class="col_last" style="border:1px solid #B4B4B4;overflow:hidden;height:880px;position:absolute;left:220px;margin:0;padding:0"> 
<!--  -->
	       </div>
	    </div>
    </div>	      		    
</body>
</html>